<template>
	<view class="SleepCard">
		<view class="cord_title" :class="{ reversal: sleepType !== 'night' }">
			<view v-if="sleepInNightData.length" class="night_cord_title" :class="{ selected: sleepType === 'night' }" @click="sleepType = 'night'"
				>夜间睡眠记录
				<uni-icons v-if="sleepType !== 'night'" color="#2D99FF" size="12" type="right"></uni-icons>
			</view>
			<view v-if="sleepInOtherData.length" class="other_cord_title" :class="{ selected: sleepType === 'other' }" @click="sleepType = 'other'"
				>其他睡眠记录
				<uni-icons v-if="sleepType !== 'other'" color="#2D99FF" size="12" type="right"></uni-icons>
			</view>
		</view>

		<view v-if="sleepInNightData.length || sleepInOtherData.length" class="sleep_main_box">
			<view class="head">
				<image class="w-92rpx" src="@/static/ring/chart/sleep.png" mode="widthFix"></image>
				<text class="title">睡眠</text>
				<uni-icons type="info-filled" size="20" color="#666666" @click="openTip"></uni-icons>
				<view class="evaluate">{{ sleepLevelText }}</view>
			</view>

			<view class="sleep_data_box">
				<view class="sleep_data_item" v-for="(sleep, index) in sleepData" :key="index">
					<view class="sleep_duration_box">
						<view>
							<view class="label">睡眠时长</view>
							<view class="value"> {{ formatMinute(sleep.totalMinute) }} </view>
						</view>
						<view>
							<view class="label">床卧时间</view>
							<view class="value"> {{ formatMinute(sleep.asleepMinute) }} </view>
						</view>
					</view>

					<view class="chart">
						<SleepChart
							v-if="sleep.sleepData.length"
							:key="index"
							showY
							:showX="false"
							:showTime="true"
							:value="sleep.sleepData"
							style="height: 250rpx"
						></SleepChart>
					</view>

					<view class="sleep_type">
						<view class="des" v-for="item in sleep.sleepTypeData" :key="item.title">
							<view class="desTop">
								<view class="dot" :class="item.bg"></view>
								<view class="titleTime text-#AFAFAF">
									{{ item.title }}
									<text v-if="item.type !== 'Efficiency'" class="per">{{ item.percent }}%</text>
								</view>
							</view>
							<TimeFormat v-if="item.type !== 'Efficiency'" class="TimeFormat" :mins="item.mins || 0" />
							<view v-else class="TimeFormat" :class="[item.type]">{{ item.percent }}%</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="text-align: center; color: rgba(0, 0, 0, 0.6)">暂无数据</view>

		<!-- 报告 -->
		<view class="info" v-if="(sleepInNightData.length || sleepInOtherData.length) && (sleepTotalTimeModel || sleepEfficiencyModel)">
			<view class="info-title">
				<image src="@/static/ring/chart/sleep.png" class="w-60rpx mr-8rpx" mode="widthFix" />
				整体睡眠质量
				<text>{{ sleepEfficiencyModelValue.value ? sleepEfficiencyModelValue.value + "%" : "" }}</text>
			</view>
			<view class="info-content">
				<view class="hasPoint">{{ sleepEfficiencyModelValue.description }} : {{ sleepEfficiencyModelValue.text }}</view>
				<view class="hasPoint">{{ sleepTotalTimeModelValue.description }} : {{ sleepTotalTimeModelValue.text }}</view>
			</view>
		</view>

		<view class="info" v-if="(sleepInNightData.length || sleepInOtherData.length) && (sleepNightPeriodModelValue || sleepSmallPeriodModelValue)">
			<view class="info-title">
				<image src="@/static/ring/chart/sleep.png" class="w-60rpx mr-8rpx" mode="widthFix" />
				睡眠周期分析
			</view>
			<view class="info-content">
				<view v-if="sleepNightPeriodModelValue" class="hasPoint">{{ sleepNightPeriodModelValue }}</view>
				<view v-if="sleepSmallPeriodModelValue" class="hasPoint">{{ sleepSmallPeriodModelValue }}</view>
			</view>
		</view>

		<view class="info" v-if="(sleepInNightData.length || sleepInOtherData.length) && heartbeatModel">
			<view class="info-title">
				<image src="@/static/ring/chart/heart.png" class="w-60rpx mr-8rpx" mode="widthFix" />
				睡眠平均心率
				<text>{{ heartbeatModelValue.value }}</text>
			</view>
			<view class="info-content">
				<text>{{ heartbeatModelValue.text }}</text>
			</view>
		</view>

		<view class="info" v-if="(sleepInNightData.length || sleepInOtherData.length) && bloodOxModel">
			<view class="info-title">
				<image src="@/static/ring/chart/heart.png" class="w-60rpx mr-8rpx" mode="widthFix" />
				睡眠平均血氧
				<text>{{ bloodOxModelValue.value ? bloodOxModelValue.value + "%" : "" }}</text>
			</view>
			<view class="info-content">
				<text>{{ bloodOxModelValue.text }}</text>
			</view>
		</view>
	</view>
</template>
<script>
import { queryMySleepInfoByDay, queryMySleepInfoByMonth, queryMySleepInfoByWeek } from "@/api/ring/chart.js";
import TimeFormat from "../components/sleep/timeFormat.vue";
import SleepChart from "../components/sleep/index.vue";

import sImage from "@/static/ring/chart/sleep.png";

import dayjs from "dayjs";

const sleepDataTypeEnum = {
	1: "糟糕",
	2: "一般",
	3: "良好",
	4: "优质",
};

const tip_zh = `
睡眠总分综合评估全天睡眠质量，包括睡眠时间、睡眠效率、睡眠分期、心率及清醒次数等多个指标。高分表示优质睡眠，低分提示需要改善睡眠。所有的睡眠和小睡数据都会被纳入整体睡眠评分计算

睡眠效率：睡眠效率指实际睡眠时间占躺在床上时间的百分比。较高的睡眠效率表示更高的睡眠品质。

清醒时间：指在睡眠过程中清醒的总时间，时间越少越好。

浅睡眠：浅睡眠是指不太深的睡眠阶段，对恢复体力和能量有一定作用。

深睡眠：深睡眠是最恢复性的睡眠阶段，对身体和大脑的修复至关重要。

快速动眼睡眠：REM睡眠对情绪调节和记忆巩固非常重要。

小睡：小睡有助于补充能量，改善注意力和效率。
`;

export default {
	components: {
		TimeFormat,
		SleepChart,
	},
	props: {
		selectDateInfo: Object,
	},
	data() {
		return {
			selectType: "day",
			sleepType: "night",
			selectedRecord: "night",
			score: 0,
			scoreLevel: 1,

			sleepTotalTimeModel: null,
			sleepEfficiencyModel: null,
			sleepDeepModel: null,
			sleepLightModel: null,
			sleepRemModel: null,
			sleepWakeUpModel: null,
			sleepSmallModel: null,
			heartbeatModel: null,
			bloodOxModel: null,

			sleepInNightData: [],
			sleepInOtherData: [],
			sleepTypeData: [],
		};
	},

	computed: {
		formatMinute() {
			return (minute) => {
				const hours = Math.floor(minute / 60) || 0;
				const mins = minute % 60 || 0;
				return (hours ? hours + "时" : "") + (mins ? mins + "分" : "");
			};
		},
		sleepLevelText() {
			return sleepDataTypeEnum[this.scoreLevel];
		},

		sleepData() {
			return this.sleepType === "night" ? this.sleepInNightData : this.sleepInOtherData;
		},

		sleepEfficiencyModelValue() {
			return {
				value: this.sleepEfficiencyModel?.value,
				description: this.sleepEfficiencyModel?.config?.description,
				text: this.sleepEfficiencyModel?.config?.modelZh,
			};
		},
		sleepTotalTimeModelValue() {
			return {
				description: this.sleepTotalTimeModel?.config?.description,
				text: this.sleepTotalTimeModel?.config?.modelZh,
			};
		},

		sleepNightPeriodModelValue() {
			let desc = "";
			if (this.sleepDeepModel?.config?.modelZh) {
				desc += this.sleepDeepModel?.config?.modelZh + "\n";
			}

			if (this.sleepLightModel?.config?.modelZh) {
				desc += this.sleepLightModel?.config?.modelZh + "\n";
			}

			if (this.sleepRemModel?.config?.modelZh) {
				desc += this.sleepRemModel?.config?.modelZh + "\n";
			}

			if (this.sleepWakeUpModel?.config?.modelZh) {
				desc += this.sleepDeepModel?.config?.modelZh + "\n";
			}
			return desc;
		},

		sleepSmallPeriodModelValue() {
			let desc = "";
			if (this.sleepSmallModel?.config?.modelZh) {
				desc += this.sleepSmallModel?.config?.modelZh + "\n";
			}
			return desc;
		},

		heartbeatModelValue() {
			return {
				value: this.heartbeatModel?.value,
				text: this.heartbeatModel?.config?.modelZh,
			};
		},

		bloodOxModelValue() {
			return {
				value: this.bloodOxModel?.value,
				text: this.bloodOxModel?.config?.modelZh,
			};
		},
	},

	watch: {
		selectDateInfo: {
			handler(nv) {
				this.selectType = nv.type;
				this.sleepOnChange(nv);
			},
			deep: true,
		},
	},

	methods: {
		changeSleepType(type) {
			if (!this.sleepInNightData.length || !this.sleepInOtherData.length) return;
			this.sleepType = type;
		},
		async sleepOnChange(value) {
			const { type, startTime, endTime } = value;

			const offsetMinutes = new Date().getTimezoneOffset();

			const params =
				type == "day"
					? { dateStr: startTime, offsetMinutes }
					: type === "week"
					? { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes }
					: { dateBeginStr: startTime, dateEndStr: endTime, offsetMinutes };
			console.log("params", params);

			const requestMethod = type == "day" ? queryMySleepInfoByDay : type == "week" ? queryMySleepInfoByWeek : queryMySleepInfoByMonth;

			try {
				const { data } = await requestMethod(params);
				console.log("data", data);

				if (type === "day") {
					// 分数 和 级别
					this.score = data.score;
					this.scoreLevel = this.scoreRange(this.score);

					const asleepRate = (data?.asleepRate || 0) * 100;
					const sleepRecords = data.sleepRecords || [];

					if (!sleepRecords.length) {
						this.sleepInNightData = [];
						this.sleepInOtherData = [];
						return;
					}

					const sleepRecords4Local = sleepRecords
						.map((item) => {
							const { sleepTime, wakeUpTime, ...other } = item;
							return {
								sleepTime: dayjs(sleepTime).format("YYYY-MM-DD HH:mm:ss"),
								wakeUpTime: dayjs(wakeUpTime).format("YYYY-MM-DD HH:mm:ss"),
								...other,
							};
						})
						.map((item) => {
							const { sleepTime, wakeUpTime, dateFormat, ...other } = item;
							const over = this.isSleepInRange(sleepTime, wakeUpTime, dateFormat);
							item.isNight = over;
							return {
								sleepTime,
								wakeUpTime,
								dateFormat,
								isNight: over,
								...other,
							};
						});

					console.log("sleepRecords4Local", sleepRecords4Local);

					const sleepInNight = sleepRecords4Local.filter((item) => item.isNight);

					console.log("sleepInNight", sleepInNight);

					const sleepInOther = sleepRecords4Local.filter((item) => !item.isNight);
					console.log("sleepInOther", sleepInOther);

					if (!sleepInNight.length) {
						this.sleepInNightData = [];
						this.selectedRecord = "other";
					} else {
						this.selectedRecord = "night";
					}

					const sleepInNightTotalData =
						sleepInNight.reduce((acc, cur) => {
							const {
								sleepTime,
								wakeUpTime,
								dateFormat,
								rates,
								asleepMinute,
								wakeUpMinute,
								lightSleepMinute,
								deepSleepMinute,
								remMinute,
								smallMinute,
								totalMinute,
								small,
							} = cur;
							if (acc === null) {
								acc = {};
								acc.sleepTime = sleepTime;
								acc.wakeUpTime = wakeUpTime;
								acc.dateFormat = dateFormat;
								acc.asleepMinute = Number(asleepMinute);
								acc.wakeUpMinute = Number(wakeUpMinute);
								acc.lightSleepMinute = Number(lightSleepMinute);
								acc.deepSleepMinute = Number(deepSleepMinute);
								acc.remMinute = Number(remMinute);
								acc.smallMinute = Number(smallMinute);
								acc.totalMinute = Number(totalMinute);
								acc.small = Number(small);
							} else {
								const ps = dayjs(acc?.sleepTime);
								const pw = dayjs(acc?.wakeUpTime);
								const cs = dayjs(sleepTime);
								const cw = dayjs(wakeUpTime);

								acc.sleepTime = ps.isBefore(cs) ? acc.sleepTime : sleepTime;
								acc.wakeUpTime = pw.isAfter(cw) ? acc.wakeUpTime : wakeUpTime;
								acc.asleepMinute += Number(asleepMinute);
								acc.wakeUpMinute += Number(wakeUpMinute);
								acc.lightSleepMinute += Number(lightSleepMinute);
								acc.deepSleepMinute += Number(deepSleepMinute);
								acc.remMinute += Number(remMinute);
								acc.smallMinute += Number(smallMinute);
								acc.totalMinute += Number(totalMinute);
								acc.small += Number(small);
							}
							return acc;
						}, null) || {};

					sleepInNightTotalData.sleepData = [];

					// 夜间睡眠质量
					{
						const { deepSleepMinute, lightSleepMinute, remMinute, wakeUpMinute } = data;
						const { wakeUpRate, lightSleepRate, deepSleepRate, remRate } = data;

						this.sleepInNightData = !!sleepInNightTotalData.asleepMinute ? [sleepInNightTotalData] : [];

						sleepInNightTotalData.sleepTypeData = [
							{
								title: "效率",
								type: "Efficiency",
								// icon: icon1,
								value: 0,
								classbg: "efficiency",
								bg: "bg-#FDA591",
								// asleepMinute / totalMinute
								percent: Math.floor(asleepRate) || 0,
								arrow: true,
								mins: 0,
								valueName: "asleepMinute",
							},
							{
								title: "清醒",
								type: "Wake Up",
								classbg: "Wakeup",
								// icon: icon2,
								value: 0,
								bg: "bg-#999999",
								percent: Math.floor(wakeUpRate * 100) || 0,
								arrow: true,
								mins: wakeUpMinute || 0,
								valueName: "wakeUpMinute",
							},
							{
								title: "浅睡",
								type: "Light Sleep",
								classbg: "Lightsleep",
								// icon: icon3,
								value: 0,
								bg: "bg-#2777E3",
								percent: Math.floor(lightSleepRate * 100) || 0,
								arrow: false,
								mins: lightSleepMinute || 0,
								valueName: "lightSleepMinute",
							},
							{
								title: "深睡",
								type: "Deep Sleep",
								classbg: "Deepsleep",
								// icon: icon4,
								value: 0,
								bg: "bg-#0A2FAA",
								percent: Math.floor(deepSleepRate * 100) || 0,
								arrow: true,
								mins: deepSleepMinute || 0,
								valueName: "deepSleepMinute",
							},
							{
								title: "快速眼动",
								type: "Fall Asleep",
								// icon: icon1,
								value: 0,
								classbg: "fallasleep",
								bg: "bg-#EFAB08",
								percent: Math.floor(remRate * 100) || 0,
								arrow: true,
								mins: remMinute || 0,
								valueName: "remMinute",
							},
						];
					}

					// 其余睡眠数据类型细分
					{
						if (Array.isArray(sleepInOther) && sleepInOther.length) {
							this.sleepInOtherData = sleepInOther.map((item) => {
								const start_t = dayjs(item.sleepTime).format("YYYY-MM-DD HH:mm");
								const end_t = dayjs(item.wakeUpTime).format("YYYY-MM-DD HH:mm");
								const rangeDBVos = data.userSleepDBVos
									.filter((vo) => {
										return dayjs(vo.startTime).diff(start_t, "minutes") >= 0 && dayjs(vo.endTime).diff(end_t, "minutes") <= 1;
									})
									.reduce((acc, cur) => {
										if (acc.length === 0) {
											acc.push(cur);
										} else {
											const prev = acc[acc.length - 1];
											const start = dayjs(cur.startTime);
											const end = dayjs(prev.endTime);
											if (start.diff(end, "minutes") > 1) {
												acc.push({
													value: 4,
													startTime: prev.endTime,
													endTime: cur.startTime,
												});
											}
											acc.push(cur);
										}
										return acc;
									}, []);
								const totalMinute = item.totalMinute,
									wakeUpMinute = item.wakeUpMinute,
									deepSleepMinute = item.deepSleepMinute,
									lightSleepMinute = item.lightSleepMinute,
									remMinute = item.remMinute;
								const asleepMinute = totalMinute - wakeUpMinute;

								const sleepTypeData = [
									{
										title: "效率",
										type: "Efficiency",
										// icon: icon1,
										value: 0,
										classbg: "efficiency",
										bg: "bg-#FDA591",
										// asleepMinute / totalMinute
										percent: Math.floor((asleepMinute * 100) / totalMinute) || 0,
										arrow: true,
										mins: 0,
										valueName: "asleepMinute",
									},
									{
										title: "醒来",
										type: "Wake Up",
										classbg: "Wakeup",
										// icon: icon2,
										value: 0,
										bg: "bg-#000000",
										percent: Math.floor((wakeUpMinute * 100) / totalMinute) || 0,
										arrow: true,
										mins: wakeUpMinute || 0,
										valueName: "wakeUpMinute",
									},
									{
										title: "浅睡",
										type: "Light Sleep",
										classbg: "Lightsleep",
										// icon: icon3,
										value: 0,
										bg: "bg-#2777E3",
										percent: Math.floor((lightSleepMinute * 100) / totalMinute) || 0,
										arrow: false,
										mins: lightSleepMinute || 0,
										valueName: "lightSleepMinute",
									},
									{
										title: "深睡",
										type: "Deep Sleep",
										classbg: "Deepsleep",
										// icon: icon4,
										value: 0,
										bg: "bg-#0A2FAA",
										percent: Math.floor((deepSleepMinute * 100) / totalMinute) || 0,
										arrow: true,
										mins: deepSleepMinute || 0,
										valueName: "deepSleepMinute",
									},
									{
										title: "快速眼动",
										type: "Fall Asleep",
										// icon: icon1,
										value: 0,
										classbg: "fallasleep",
										bg: "bg-#EFAB08",
										percent: Math.floor((remMinute * 100) / totalMinute) || 0,
										arrow: true,
										mins: remMinute || 0,
										valueName: "remMinute",
									},
								];

								item.sleepTypeData = sleepTypeData;

								return {
									sleepTime: item.sleepTime,
									wakeUpTime: item.wakeUpTime,
									wakeUpHM: dayjs(item.wakeUpTime).format("HH:mm"),
									sleepHM: dayjs(item.sleepTime).format("HH:mm"),
									totalMinute,
									wakeUpMinute,
									asleepMinute,
									deepSleepMinute,
									lightSleepMinute,
									remMinute,
									sleepTypeData,
									sleepData: rangeDBVos.map((vo) => {
										const minutes = Math.round(dayjs(vo.endTime).diff(dayjs(vo.startTime), "minutes"));
										return {
											type: vo.value,
											minutes: minutes,
											startTime: vo.startTime,
											endTime: vo.endTime,
										};
									}),
								};
							});
							console.log("sleepInOtherData.value ", this.sleepInOtherData);
						} else {
							this.sleepInOtherData = [];
						}
					}

					// 睡眠质量图表数据
					{
						const _sleepData = data.userSleepDBVos.map((item) => {
							const minutes = Math.round(dayjs(item.endTime).diff(dayjs(item.startTime), "minutes"));
							return {
								type: item.value,
								minutes: minutes,
								startTime: item.startTime,
								endTime: item.endTime,
							};
						});

						console.log("_sleepData", _sleepData);

						const sleepInNightData = this.sleepInNightData[0];

						const nightStartTime = dayjs(sleepInNightData?.sleepTime).format("YYYY-MM-DD HH:mm");
						const nightEndTime = dayjs(sleepInNightData?.wakeUpTime).format("YYYY-MM-DD HH:mm");

						console.log(" nightStartTime", nightStartTime, " nightEndTime", nightEndTime);

						// 根据时间范围将 _sleepData 存入 sleepInNightData 或 sleepInOtherData
						_sleepData.forEach((sleepItem) => {
							if (sleepInOther.length === 0) {
								sleepInNightData.sleepData.push(sleepItem);
								return;
							}
							const startTime = dayjs(sleepItem.startTime).format("YYYY-MM-DD HH:mm");
							const endTime = dayjs(sleepItem.endTime).format("YYYY-MM-DD HH:mm");

							if (dayjs(startTime).diff(nightStartTime, "minutes") >= 0 && dayjs(endTime).diff(nightEndTime, "minutes") <= 1) {
								sleepInNightData.sleepData.push(sleepItem);
							}
						});

						sleepInNightTotalData.sleepHM = dayjs(sleepInNightData.sleepData[0]?.startTime).format("HH:mm");
						sleepInNightTotalData.wakeUpHM = dayjs(sleepInNightData.sleepData[sleepInNightData.sleepData.length - 1].endTime)?.format("HH:mm");

						console.log("sleepInNightData.value.sleepData", sleepInNightData.sleepData);
					}
				} else {
					//
				}

				// 报告
				{
					this.sleepTotalTimeModel = data.sleepTotalTimeModel;
					this.sleepEfficiencyModel = data.sleepEfficiencyModel;
					this.sleepWakeUpModel = data.sleepWakeUpModel;
					this.sleepDeepModel = data.sleepDeepModel;
					this.sleepRemModel = data.sleepRemModel;
					this.sleepLightModel = data.sleepLightModel;
					this.sleepSmallModel = data.sleepSmallModel;
					this.heartbeatModel = data.heartbeatModel;
					this.bloodOxModel = data.bloodOxModel;
				}
			} catch (error) {
				console.log("sleepOnChange error", error);
			}
		},

		scoreRange(score) {
			if (score <= 40) {
				return 1; // Bad
			} else if (score > 40 && score <= 60) {
				return 2; // Good
			} else if (score > 60 && score <= 80) {
				return 3; // Great
			} else if (score > 80 && score <= 100) {
				return 4; // Excellent
			} else {
				return 0; // 超出范围的评分
			}
		},

		isSleepInRange(wakeTime, sleepTime, sleepDate) {
			console.log("isSleepInRange", wakeTime, sleepTime, sleepDate);

			// 将输入的时间字符串转换为 dayjs 对象
			const wake = dayjs(wakeTime);
			const sleep = dayjs(sleepTime);
			const date = dayjs(sleepDate);

			// 计算睡眠日期前一天的23点和睡眠日期的8点
			const startRange = date.subtract(1, "day").hour(23).minute(0).second(0);
			const endRange = date.hour(8).minute(0).second(0);

			// 检查睡眠时间段是否与范围有重叠
			return (
				(sleep.isBefore(endRange) && wake.isAfter(startRange)) ||
				(wake.isBefore(endRange) && sleep.isAfter(startRange)) ||
				(sleep.isBefore(endRange) && sleep.isAfter(startRange)) ||
				(wake.isBefore(endRange) && wake.isAfter(startRange))
			);
		},

		openTip() {
			const tips = {
				tip: tip_zh,
				icon: sImage,
				title: "睡眠",
			};

			this.$emit("tips", tips);
		},
	},
};
</script>
<style lang="scss" scoped>
.SleepCard {
	width: 100%;
	padding: 20rpx;

	.w-92rpx {
		width: 92rpx;
	}

	.w-60rpx {
		width: 60rpx;
	}
	.mr-8rpx {
		margin-right: 8rpx;
	}

	.bg-\#FDA591 {
		background-color: #fda591;
	}
	.bg-\#999999 {
		background-color: #999999;
	}
	.bg-\#2777E3 {
		background-color: #2777e3;
	}
	.bg-\#0A2FAA {
		background-color: #0a2faa;
	}
	.bg-\#EFAB08 {
		background-color: #efab08;
	}

	.text-\#AFAFAF {
		color: #afafaf;
	}

	.cord_title {
		width: 100%;

		display: flex;
		justify-content: space-between;
		align-items: center;

		margin-top: 20rpx;
		margin-bottom: 12rpx;

		&.reversal {
			flex-direction: row-reverse;
		}

		.night_cord_title,
		.other_cord_title {
			color: #2d99ff;
			font-size: 24rpx;

			&.selected {
				color: #000;
				font-size: 36rpx;
			}
		}
	}

	.sleep_main_box {
		width: 100%;
		min-height: 1070rpx;
		height: max-content;

		padding: 40rpx;
		margin-bottom: 40rpx;

		border-radius: 48rpx;
		background-color: #f0f4f7;
		backdrop-filter: blur(40rpx);

		.head {
			width: 100%;

			display: flex;
			justify-content: flex-start;
			align-items: center;

			.title {
				color: black;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				text-align: left;
				margin: 0 20rpx 0 0;
			}

			.evaluate {
				font-size: 56rpx;
				font-weight: 600;
				line-height: 80rpx;
				text-align: left;

				color: #efb336;
				margin-left: auto;
				margin-right: 20rpx;
			}
		}

		.sleep_duration_box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;

			margin: 50rpx 0;

			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: rgba($color: #000000, $alpha: 0.5);
			}
			.value {
				font-weight: 500;
				font-size: 36rpx;
				color: black;
			}
		}

		.chart {
			width: 100%;

			.sleep_h_m {
				width: 100%;
				color: black;
				display: flex;
				justify-content: space-between;
				align-items: center;

				font-size: 24rpx;
				font-weight: 300;
				line-height: 32rpx;
				text-align: left;
				padding-top: 10rpx;
				padding-left: 120rpx;
			}
		}

		.sleep_type {
			width: 100%;
			padding-left: 50rpx;
			padding-right: 0;

			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.des {
				width: 50%;
				margin-top: 30rpx;

				.desTop {
					display: flex;
					align-items: center;
					padding-bottom: 15rpx;

					.fallasleep {
						background-color: linear-gradient(322deg, #003cff -40.23%, #6085fe 103.51%) !important;
					}

					.Wakeup {
						background-color: linear-gradient(322deg, #10ff00 -40.23%, #94fe60 103.51%) !important;
					}

					.Lightsleep {
						background-color: linear-gradient(322deg, #ff6d00 -40.23%, #fea460 103.51%);
					}

					.Deepsleep {
						background-color: linear-gradient(322deg, #8600ff -40.23%, #c060fe 103.51%);
					}

					.smallMinute {
						background-color: #afafaf !important;
					}

					.title {
						font-size: 20rpx;
						font-weight: 500;
						color: black;
						margin-left: 20rpx;
					}

					.titleTime {
						font-size: 28rpx;
						color: black;
						margin-left: 20rpx;

						.per {
							margin-left: 10rpx;
						}
					}

					.dot {
						border-radius: 50%;
						width: 16rpx;
						height: 16rpx;
					}
				}

				.TimeFormat {
					padding-left: 20rpx;
				}

				.Efficiency {
					font-size: 32rpx;
					font-weight: 700;
					line-height: 46rpx;
					text-align: left;
					color: black;
					text-indent: 10rpx;
				}
			}
		}
	}

	.info {
		color: black;
		padding: 40rpx;

		.info-title {
			height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-weight: 600;
			line-height: 50px;
			text-align: left;
			padding: 40rpx 0;

			.value {
				margin-left: auto;
			}

			text {
				margin-left: auto;
			}
		}

		.info-content {
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 300;
			line-height: 40rpx;
			text-align: left;

			view {
				position: relative;
			}

			.hasPoint {
				white-space: pre-line;
			}

			.hasPoint::before {
				content: "·";
				font-size: 80rpx;
				font-weight: bold;
				color: black;
				position: absolute;
				left: -40rpx;
			}
		}
	}
}
</style>
